<template>
    <transition name="fade">
      <div v-show="detailShow" class="detail">
        <div class="detail-wrapper clear-fix">
          <div class="detail-main">
            <h1 class="name">{{seller.name}}</h1>
            <div class="star-wrapper">
              <!-- <star :size="48" :score="seller.score"></star> -->
              <Star :size="48" :score="seller.score" />
            </div>
            <div class="title">
              <div class="line"></div>
              <div class="text">优惠信息</div>
              <div class="line"></div>
            </div>
            <ul v-if="seller.supports" class="supports">
              <li class="support-item" v-for="(item,index) in seller.supports" :key="index">
                <!-- <span class="icon" :class="classMap[seller.supports[index].type]"></span> -->
                <SupportIco :size=2 :type="item.type" />
                <span class="text">{{seller.supports[index].description}}</span>
              </li>
            </ul>
            <div class="title">
              <div class="line"></div>
              <div class="text">商家公告</div>
              <div class="line"></div>
            </div>
            <div class="bulletin">
              <p class="content">{{seller.bulletin}}</p>
            </div>
          </div>
        </div>
        <div class="detail-close" @click="hideDetail">
          <i class="icon-close"></i>
        </div>
      </div>
    </transition>
</template>

<script>
import SupportIco from 'components/support-ico/support-ico'
import Star from 'components/star/star'

export default {
    name: 'header-detail',
    props: {
        seller: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data(){
        return {
            detailShow: false
        }
    },
    methods: {
        show() {
            this.detailShow = true
        },
        hideDetail() {
            this.detailShow = false
        }
    },
    components: {
        SupportIco,
        Star
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/mixin"
@import "~common/stylus/variable"
.detail
      position: fixed
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      color: $color-white
      background-filter: blur(10px)
      opacity: 1
      background: $color-background-s
      &.fade-enter-active, &.fade-leave-active
        transition: all 0.5s
      &.fade-enter, &.fade-leave-active
        opacity: 0
        background: $color-background
      .detail-wrapper
        display: inline-block
        width: 100%
        min-height: 100%
        .detail-main
          margin-top: 64px
          padding-bottom: 64px
          .name
            line-height: 16px
            text-align: center
            font-size: $fontsize-large
            font-weight: 700
          .star-wrapper
            margin-top: 18px
            padding: 2px 0
            text-align: center
          .title
            display: flex
            width: 80%
            margin: 28px auto 24px auto
            .line
              flex: 1
              position: relative
              top: -6px
              border-bottom: 1px solid rgba(255, 255, 255, 0.2)
            .text
              padding: 0 12px
              font-weight: 700
              font-size: $fontsize-medium

          .supports
            width: 80%
            margin: 0 auto
            .support-item
              display: flex
              align-items: center
              padding: 0 12px
              margin-bottom: 12px
              &:last-child
                margin-bottom: 0
              .support-ico
                margin-right: 4px
              .text
                line-height: 16px
                font-size: $fontsize-small
          .bulletin
            width: 80%
            margin: 0 auto
            .content
              padding: 0 12px
              line-height: 24px
              font-size: $fontsize-small
      .detail-close
        position: relative
        width: 32px
        height: 32px
        margin: -64px auto 0 auto
        clear: both
        font-size: $fontsize-large-xxxx
</style>


